<template>
	<view class="">
		<view class="app">
			<view class="zuo">
				<view class="an" v-for="(item,index) in list" :key='index' :class="id===index?'active':''"  @click="youbian(item.id,index)">
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="you">
				<view v-for="(item,index) in youlist" :key="index">
						<text>{{item.title}}</text>
						<image src="../../static/22.png" mode="" class="vv"></image>
						<text>{{item.zhaiyao}}</text>
				</view>
				<view class="shuju" v-if="youlist.length === 0">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id:0,
				list: [],
				youlist: []
			}
		},
		created() {
			this.datalist()
		},
		methods: {
			// 渲染图片分类
			async datalist() {
				const {
					message
				} = await uni.$Http.get(`getimgcategory`)
				this.list = message
				// console.log(message)
			},
			// 二级图片列表
			async youbian(id,index) {
				this.id=index
				const {message} = await uni.$Http.get(`getimages/${id}`)
				this.youlist = message
				// console.log(this.youlist)
			},
		}
	}
</script>

<style>
	.app{
		display: flex;
	}
	.zuo{
		width: 30%;
		height: 504px;
		border: 1px solid red;
		overflow-y: scroll;
	}
	.an{
		width: 100%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		border-bottom: 1px solid #C8C7CC;
	}
	.you{
		width: 70%;
		height: 504px;
		overflow-y: scroll;
	}
	image{
		width: 100%;
		height: 150px;
	}
	.active{
		background-color: #007AFF;
	}
</style>
